<template>
  <el-menu
    :default-active="activeMenu"
    class="sidebar-menu"
    :collapse="isCollapse"
    @select="handleSelect"
  >
    <el-menu-item index="/backend/dashboard">
      <el-icon><HomeFilled /></el-icon>
      <span>首页</span>
    </el-menu-item>

    <el-sub-menu index="user">
      <template #title>
        <el-icon><User /></el-icon>
        <span>用户管理</span>
      </template>
      <el-menu-item index="/backend/user-list">用户列表</el-menu-item>
      <el-menu-item index="/backend/user-role">角色管理</el-menu-item>
    </el-sub-menu>

    <el-sub-menu index="movie">
      <template #title>
        <el-icon><Film /></el-icon>
        <span>电影管理</span>
      </template>
      <el-menu-item index="/backend/movie-list">电影列表</el-menu-item>
      <el-menu-item index="/backend/movie-crawler">电影采集</el-menu-item>
      <el-menu-item index="/backend/movie-clean">数据清洗</el-menu-item>
    </el-sub-menu>

    <el-sub-menu index="data">
      <template #title>
        <el-icon><DataLine /></el-icon>
        <span>数据分析</span>
      </template>
      <el-menu-item index="/backend/analysis/box-office">票房分析</el-menu-item>
      <el-menu-item index="/backend/analysis/showing">排片分析</el-menu-item>
    </el-sub-menu>

    <el-menu-item index="/backend/settings">
      <el-icon><Setting /></el-icon>
      <span>系统设置</span>
    </el-menu-item>
  </el-menu>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {
  HomeFilled,
  User,
  Film,
  DataLine,
  Setting
} from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()
const isCollapse = ref(false)

const activeMenu = computed(() => route.path)

const handleSelect = (index) => {
  router.push(index)
}
</script>

<style scoped>
.sidebar-menu {
  height: 100%;
  border-right: none;
}

.sidebar-menu:not(.el-menu--collapse) {
  width: 200px;
}

:deep(.el-menu-item.is-active) {
  background-color: var(--el-menu-hover-bg-color);
}

:deep(.el-sub-menu .el-menu-item) {
  min-width: 200px;
}
</style> 